<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ methodId ? '修改' : '新增' }}渠道方法</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>方法名：</span>
          <div :class="{'error_border':tipNum===1}">
            <el-input type="text" placeholder="请输入方法名" v-model.trim="methodName"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>方法名称：</span>
          <div :class="{'error_border':tipNum===2}">
            <el-input type="text" placeholder="请输入方法名称" v-model.trim="mName"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>渠道：</span>
          <div :class="{'error_border':tipNum===3}">
            <el-select
              v-model="channelId"
              placeholder="请选择渠道">
              <el-option
                v-for="(item,index) in channelOption"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>参数配置：</span>
          <div :class="{'error_border':tipNum===4}">
            <el-input type="textarea" placeholder="请输入参数配置" v-model.trim="paramSet" :rows="6"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>参数说明：</span>
          <div :class="{'error_border':tipNum===5}">
            <el-input type="textarea" placeholder="请输入参数说明" v-model.trim="content" :rows="6"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>参数模板：</span>
          <div :class="{'error_border':tipNum===6}">
            <el-input type="textarea" placeholder="请输入参数模板" v-model.trim="templateId" :rows="6"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>消息体示例：</span>
          <div :class="{'error_border':tipNum===7}">
            <el-input type="textarea" placeholder="请输入消息体示例" v-model.trim="demo" :rows="6"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab">状态：</span>
          <div>
            <el-radio-group v-model="proStatus">
              <el-radio :label="1">可用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

import {getAllMessageChannel} from "../../../api/data/channel";
import {getMethodDetail,addMethod,updateMethod} from "../../../api/data/method";

export default {
  props: ['methodId'],
  data() {
    return {
      methodName: '',
      channelId:'',
      channelOption:[],
      content:'',
      demo:'',
      templateId:'',
      mName:'',
      paramSet:'',
      proStatus: 1,
      infoTip: '',
      tipNum: '',
      loading: false,
    }
  },
  mounted() {
    this.getChannel();
    if (this.methodId){
      this.getDetail()
    }
  },
  methods: {
    // 获取渠道
    getChannel(){
      getAllMessageChannel( ).then(res => {
        this.channelOption = res.data ? res.data :[];
      });
    },

    getDetail() {
      getMethodDetail( this.methodId ).then(res => {
        if (res.data) {
          let info = res.data;
          this.demo = info.demo ? info.demo : '';
          this.content = info.content ? info.content : '';
          this.mName = info.name ? info.name : '';
          this.channelId = info.channelId ? info.channelId : '';
          this.templateId = info.template? info.template : '';
          this.methodName = info.method ? info.method : '';
          this.paramSet =  info.config ? info.config : '';
          this.proStatus = info.enable ? info.enable : 1;
        }
      });
    },

    // 确认编辑
    confirmEdit() {
      if (!this.methodName) {
        this.setTip(1, '请输入方法名！')
      } else if (!this.mName) {
        this.setTip(2, '请输入方法名称！')
      } else if (this.channelId === '') {
        this.setTip(3, '请选择渠道！')
      }else if (this.paramSet === '') {
        this.setTip(4, '请输入参数配置！')
      }else if (this.content === '') {
        this.setTip(5, '请输入发送消息参数说明！')
      }else if (this.templateId === '') {
        this.setTip(6, '请输入参数模板设置！')
      }else if (this.demo === '') {
        this.setTip(7, '请输入发送消息体示例！')
      }  else {
        this.sendInfo()
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let data = {
        enable: that.proStatus,
        name: that.mName,
        content: that.content,
        template: that.templateId,
        channelId: that.channelId,
        method: that.methodName,
        config:that.paramSet,
        demo: that.demo
      }
      if (that.methodId) {
        data.id = that.methodId;
        updateMethod(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addMethod(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setResult(finish){
      if (finish){
        this.closePopup(true);
        this.$message.success('操作成功！');
      }
      this.loading = false;
    },

    setTip(num, text) {
      this.tipNum = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>


</style>
